<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span v-if="objForm.id">编辑</span>
          <span v-else>添加</span>订单信息
        </b>
        <div class="u-right u-5mt">
          <el-button
            type="success"
            size="small"
            icon="el-icon-document-checked"
            @click="submitForm()"
            v-if="hasPerm('orderOutEditPost')&&(out_handle_status==1||out_handle_status==3||out_handle_status==4)"
          >提交保存</el-button>
          <el-button size="small" icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
      <el-form
        style="max-width: 900px"
        :model="subform"
        :rules="rules"
        ref="objForm"
        label-width="100px"
        class="u-form"
      >
        <el-form-item label="审核状态">
          <template>
            <el-radio-group
              v-model="subform.out_handle_status"
              :disabled="out_handle_status==2||out_handle_status==5"
            >
              <el-radio :label="1">申请中</el-radio>
              <el-radio :label="2">拒绝申请</el-radio>
              <el-radio :label="3">同意申请</el-radio>
              <el-radio :label="4" disabled="disabled">货物确认中</el-radio>
              <el-radio :label="5">确认完成</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="拒绝原因" v-if="subform.out_handle_status==2">
          <el-input
            type="textarea"
            rows="6"
            maxlength="300"
            v-model="subform.out_not_text"
            :disabled="out_handle_status==2"
            placeholder="原因300字以内"
          ></el-input>
        </el-form-item>
        <el-form-item label="物流单号" v-if="out_order.out_type==2&&out_order.out_logistics_str!=''">
          <el-tag>{{out_order.out_logistics_str}}</el-tag>
        </el-form-item>
        <el-form-item label="商品信息">
          <el-table :data="items" stripe style="width: 100%">
            <el-table-column prop="goods_title" label="商品名称" width="160"></el-table-column>
            <el-table-column prop="attribute_names" label="商品规格" width="160"></el-table-column>
            <el-table-column label="商品封面" width="80">
              <template slot-scope="scope">
                <el-image
                  style="max-width: 60px;"
                  :src="scope.row.goods_img"
                  :data-src="scope.row.goods_img"
                  fit="cover"
                  lazy
                ></el-image>
              </template>
            </el-table-column>

            <el-table-column prop="goods_price" label="单价"></el-table-column>
            <el-table-column prop="goods_number" label="数量"></el-table-column>
            <el-table-column label="订单所属">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.goods_source=='agency'" type="info">群主</el-tag>
                <el-tag v-if="scope.row.goods_source=='system'" type="danger">平台</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="order_total" label="项总价"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  style="margin-left: 0"
                  size="mini"
                  type="text"
                  @click.native="showLogistics(scope.row.logistics_id)"
                  v-if="scope.row.logistics_id!=0"
                >查看物流</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="退款原因">
          <div>{{out_order.out_explain}}</div>
        </el-form-item>

        <el-form-item label="群主">
          <div>{{order.agency_title}}</div>
        </el-form-item>

        <el-form-item label="购买用户">
          <div>{{order.nick_name}}</div>
        </el-form-item>

        <el-form-item label="订单编号">
          <div>{{order.order_sn}}</div>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-tag>收货人 : {{order.take_name}}</el-tag>
          <el-divider direction="vertical"></el-divider>
          <el-tag type="success">收货电话 : {{order.take_phone}}</el-tag>
          <el-divider direction="vertical"></el-divider>
          <el-tag type="info">联系地址 : {{order.take_address}}</el-tag>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog title="物流信息" :visible.sync="is_logistics_log_show" width="60%">
      <Logistics :ListData="logistics_log"></Logistics>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCloseLog()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonEdit from "@/mixins/common-edit";
import Logistics from "@/components/logistics/logistics";
export default {
  components: {
    Logistics,
  },
  mixins: [commonEdit],
  data() {
    return {
      apiName: "order",
      backRoute: "", //成功跳转地址
      objForm: {},
      out_order: {},
      order: {},
      out_handle_status: 1,
      subform: {
        id: "",
        out_handle_status: 1,
        out_not_text: "",
      },
      items: [],
      logistics_log: [],
      is_logistics_log_show: false,
    };
  },
  methods: {
    dialogCloseLog() {
      this.is_logistics_log_show = false;
    },
    showLogistics(id) {
      let self = this;
      self.$api[self.apiName].logisticsLog(id).then((response) => {
        if (response.code == 1) {
          self.logistics_log = response.data;
          self.is_logistics_log_show = true;
        }
      });
    },
    async getInfo() {
      const self = this;
      await self.beforeGetInfo();
      self.$api[self.apiName]
        .outInfo({ id: self.objForm.id })
        .then((response) => {
          if (response.code == 1) {
            self.out_order = response.data.out_order;
            self.order = response.data.order;
            self.items = response.data.items;
            self.afterGetInfo();
          }
        });
    },
    afterGetInfo() {
      this.subform.out_handle_status = this.out_order.out_handle_status;
      this.out_handle_status = this.out_order.out_handle_status;
      this.subform.out_not_text = this.out_order.out_not_text;
    },
    submitForm() {
      let self = this;
      self.$api[self.apiName].outEdit(self.subform).then((response) => {
        if (response.code == 1) {
          self.$message({
            message: "操作成功",
            type: "success",
          });
          self.getInfo();
        }
      });
    },
  },
  created() {
    if (this.$route.params.id) {
      this.objForm.id = this.$route.params.id;
      this.subform.id = this.$route.params.id;
    }
  },
};
</script>

<style>
.el-step__title {
  font-size: 16px;
}
.el-step__description {
  font-size: 15px;
}
.el-step.is-horizontal .el-step__line {
  top: 19px;
}
.el-step.is-center .el-step__description {
  padding: 0;
  text-align: center;
}
.el-step__description.is-success {
  color: #666;
}
</style>

